import Footer from './components/Footer'
import Main from './components/Main'
import Header from './components/Header'
import {Component} from 'react'

class App extends Component {
  state = {
    todos: [
      {
        id: 1,
        isCompleted: true,
        taskName: '品味JavaScript',
        isEditing: false
      },
      {
        id: 2,
        isCompleted: false,
        taskName: '领养一个宠物',
        isEditing: false
      }
    ],
    nextId:3
  }
  addTodo = (value,cb) => {
    let todo = {}
    todo.id = this.state.todos.nextId
    todo.taskName = value
    todo.isCompleted = false
    todo.isEditing = false
    let todos = JSON.parse(JSON.stringify(this.state.todos))
    todos.push(todo)
    this.setState({todos: todos, nextId: this.state.nextId +1})
  }
  removeTodo = (id,cb) => {
    let todos = JSON.parse(JSON.stringify(this.state.todos))
    let index = 0
    todos.foreach(item => {
      if (item.id === id)
        return 
      index++ 
    })
    todos.splice(index, 1)
    this.setState({todos: todos, nextId: this.state.nextId})
  }
  removeFinished =( cb) => {
    let todos = JSON.parse(JSON.stringify(this.state.todos))
    let uncompletedTodos = []
    todos.foreach((todo) => {
      if(!todo.isCompleted)
        uncompletedTodos.push(todo)
    })
    this.setState({todos: uncompletedTodos, nextId: this.state.nextId})
  }
  render() {
    return (
      <section className="todoapp">
        <Header onAdd={this.addTodo}/>
        <Main todos={this.state.todos}/>
        <Footer />
      </section>
    )
  }
}

export default App
